<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>132123</div>
    <p>13</p>
</body>
<script src="./1.js"></script>
<!-- <script src="./2.js"></script>
<script src="./4.js"></script> -->

<!-- <script>
    let oData = {
        list: [{
            a: 1
        }, {
            b: 2
        }]
    }
    class Observer {
        constructor(data) {
            this.observer(data);
        }
        observer(data) {

            if (data && typeof data === 'object') {
                this.defineProp(data,'__ob__',this)
                if (Array.isArray(data)) {
                    //处理数组
                    data.__proto__=arrayMethods;
                    this.observerArray(data);
                } else {
                    //处理对像
                    Object.keys(data).forEach(key => {
                        this.defineReactive(data, key, data[key])
                    })
                }

            }
        }
        defineProp(obj,key,value){
            Object.defineProperty(obj,key,{
                enumerable:false,
                configurable:false,
                value
            })
        }
        // 处理数组的方法
        observerArray(data) {
            data.forEach(item => {
                this.observer(item)
            })
        }
        //数据劫持
        defineReactive(obj, key, value) {
            this.observer(value);
            Object.defineProperty(obj, key, {
                enumerable: true,
                configurable: false,
                get() {
                    return value
                },
                set: (newVal) => {
                    console.log("数据变化")
                    this.observer(newVal);
                    if (newVal !== value) {
                        value = newVal;
                    }
                }
            })
        }
    }
    const oldArrayMethods = Array.prototype;
    const arrayMethods = Object.create(oldArrayMethods);
    const methods = [
        "push","pop","unshift",'shift','splice','sort','reverse'
    ]
    methods.forEach(item=>{
        arrayMethods[item]=function(...args){
             console.log('用户调用了'+item);
            let result = oldArrayMethods[item].apply(this,args);
            let addNumber;
            switch (item) {
                case 'push':
                case 'unshift':
                    addNumber = args;
                    break;
                case 'splce':
                    addNumber = args.slice(2);
                    break;
                default:
                    break;
            }
            if(addNumber){
                this.__ob__.observerArray(addNumber);
            }
            return result;
             
        }
    })
    new Observer(oData);
    // oData.list.__proto__= arrayMethods;
    console.log(oData);
</script> -->

</html>